<template>
  <div class="app-container">
    <Transition
      name="slide"
      appear>
      <el-container
        class="home-container"
        v-if="!footer.showDetail">
        <el-aside
          width="200px"
          class="side">
          <Menu />
        </el-aside>
        <el-container class="main">
          <el-header class="header">
            <Header />
          </el-header>
          <el-main
            class="content"
            v-loading="firstLoading"
            :element-loading-background="bg"
            :element-loading-spinner="Svg">
            <router-view
              v-slot="{ Component }"
              @scroll="autoHide()"
              class="view">
              <KeepAlive :max="8">
                <component
                  :is="Component"
                  :key="$route.fullPath" />
              </KeepAlive>
            </router-view>
          </el-main>
          <el-footer class="footer"><Footer /></el-footer>
        </el-container>
      </el-container>
    </Transition>
    <Transition name="slide">
      <SongDetail v-if="footer.showDetail" />
    </Transition>
    <Drawer />
  </div>
</template>
<script lang="ts" setup>
import { provide, ref, Ref } from 'vue';

import { getTheme } from './utils/util';
import { Svg } from './model';
import useConfigStore from './store/config';
import useFooterStore from './store/footer';
import SongDetail from './view/SongDetail.vue';
import Menu from './components/SideMenu.vue';
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Drawer from './components/Drawer.vue';
import _ from 'lodash';
import { storeToRefs } from 'pinia';

//配置主题
const bg = getTheme().get('background');
const menu = getTheme().get('menuColor');

const footer = useFooterStore();
//页面加载动画
const firstLoading = ref<boolean>(false);
provide<Ref<boolean>>('firstLoading', firstLoading);

const config = useConfigStore();
const { showScroll, left } = storeToRefs(config);

//设置隐藏滚动条
const hideScroll = () => {
  showScroll.value = 'none';
  left.value = '0';
};

provide<Function>('hideScroll', hideScroll);

//计时器判断是否显示进度条
let timeid: number = 0;
//自动隐藏进度条
const autoHide = _.throttle(
  () => {
    if (showScroll.value != 'block') {
      showScroll.value = 'block';
      left.value = '6px';
    }
    if (timeid) {
      clearTimeout(timeid);
    }
    timeid = setTimeout(() => {
      if (showScroll.value != 'none') {
        hideScroll();
      }
    }, 3000);
  },
  600,
  { leading: true, trailing: false }
);

console.log(import.meta.env);
</script>

<style lang="less" scoped>
@side-background: v-bind(menu);
@other-background: v-bind(bg);
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease;
}

.slide-enter-to {
  position: absolute;
  transform: translateY(0);
}

.slide-enter-from {
  position: absolute;
  transform: translateY(100%);
}

.slide-leave-to {
  position: absolute;
  transform: translateY(-100%);
}

.slide-leave-from {
  position: absolute;
  transform: translateY(0);
}

.app-container {
  .home-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    .side {
      background-color: @side-background;
      display: flex;
      justify-content: center;
    }

    .main {
      background-color: @other-background;

      .header {
        height: 10vh;
        padding: 0;
      }

      .content {
        padding: 0;
        height: 80vh;
        width: 87vw;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }
        .view {
          padding-left: v-bind(left);
          &::-webkit-scrollbar {
            display: v-bind(showScroll);
          }
        }
      }

      .footer {
        height: 10vh;
        padding: 0;
      }
    }
  }
}
</style>

<style lang="less">
.el-popover {
  min-width: 60px !important;
}
.search-tip {
  padding: 0 5px !important;
  inset: 8vh auto auto 21.5vw !important;
}
.el-popper__arrow::before {
  display: none !important;
}
</style>
